<template>
  <div class="sw">
    <banner module="sw"/>
    <vtitle name="六大亮点" class="title"/>
    <div class="home-content">
      <div class="center clearfix blingbling">
        <div v-for="(item,index) in list1" :key="index" class="box wow fadeInUp"
             :data-wow-delay="`${index/4}s`">
          <div class="flex flex-center content">
            <p v-html="item.text"></p>
          </div>
        </div>
      </div>
    </div>
    <div class="first-function" v-for="(item,index) in list2" :key="index">
      <vtitle :name="item.name" class="title" />
      <div class="home-content">
        <div class="hidden-pc wap-box">
          <div class="text-item wow fadeInUp" v-for="(item,index) in item.items" :key="index" :data-wow-delay="`${index/4}s`">
            <span v-html="item.text"></span>
            <span v-html="'0'+(index+1)" class="index"></span>
          </div>
          <img src="@/assets/img/sw/MacBook.png" alt="" class="mac wow fadeInUp" :data-wow-delay="`${index/4}s`">
        </div>
        <div class="hidden-wap pc-box clearfix">
          <div class="pc-content">
            <img src="@/assets/img/sw/MacBook.png" alt="" class="mac wow fadeInLeft" :data-wow-delay="`${index/4}s`">
          </div>
          <div class="pc-content flex flex-align pc-swiper">
            <div class="flex-box">
              <div class="text-item wow fadeInRight" v-for="(child,index) in item.items" :key="index" :data-wow-delay="`${index/4}s`">
                <span v-html="child.text"></span>
                <span v-html="'0'+(index+1)" class="index"></span>
              </div>
            </div>
            <!--<div class="step-num">-->
              <!--<span v-for="(child,index) in item.items.length"  :key="index" :class="{'active':item.active==index}"></span>-->
            <!--</div>-->
          </div>
        </div>
      </div>
    </div>
    <div class="model6">
      <vtitle name="基本功能5：智能大数据分析功能" class="title" />
      <div class="hidden-wap flex flex-center pc-box">
        <div class="icon-box">
          <div v-for="(item,index) in list3" :key="index" class="box wow fadeInLeft" :data-wow-delay="`${index/4}s`">
            <span class="icon"></span>
            <p v-html="item.text"></p>
          </div>
        </div>
        <div class="center-line"><img src="@/assets/img/sw/model-pc-line.png" alt=""class="wow fadeInLeft"></div>
        <div class="list3">
          <div v-for="(item,index) in list4" :key="index" class="wow fadeInRight" :data-wow-delay="`${index/4}s`">
            <span v-html="item"></span>
          </div>
        </div>
      </div>
      <div class="hidden-pc wap-box">
        <div v-for="(item,index) in list3" :key="index"  class="box wow fadeInUp" :data-wow-delay="`${index/4}s`">
          <img :src="require(`@/assets/img/sw/icon${index+1}-active.png`)" alt="">
          <p v-html="item.text"></p>
        </div>
        <img src="@/assets/img/sw/model6-line.png" alt="" class="model-line wow fadeInUp">
          <div class="list3 flex flex-wrap">
            <div v-for="(item,index) in list4" :key="index"  class="wow fadeInUp" :data-wow-delay="`${index/4}s`">
              <span v-html="item"></span>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import banner from  '@/components/banner-top'
import vtitle from "@/components/title";
import wowInit from '@/mixins/wowInit'
export default {
  data () {
    return {
      list1:[{
        text:'99%自动化处理，智能分析/预测/管理/决策'
      },{
        text:'一站式覆盖企业财务、报销、预算软件等全部功能'
      },{
        text:'完美解决税会差异、合并报表等传统ERP难题'
      },{
        text:'实时匹配、全面集成完整数据链条，打破数据孤岛'
      },{
        text:'高度自定义相应需求，定制化行业解决方案'
      },{
        text:'超大幅度降低企业风险，高价值、强支撑'
      }],
      list2:[{
        name:'基本功能1：报销费控功能',
        items:[{
          text:'费用报销：在线提交，实时查看进度'
        },{
          text:'费用分摊：超强多维度划分，权属清晰'
        },{
          text:'借款还款：借、报自动冲销，轻松管理'
        },{
          text:'智能匹配：自动匹配银行流水，帐实相'
        },{
          text:'只能凭证：无需人工操作，自动生成记账凭证'
        }]
      },{
        name:'基本功能2：财务核算功能',
        items:[{
          text:'应收/应付：在线提交，实时匹配资金、开票'
        },{
          text:'开票/收票：在线提交，实时查看进度'
        },{
          text:'长期资产：自动计算，直接生成会计凭证'
        },{
          text:'客户/供应商：集中管理，分权限信息维护'
        },{
          text:'智能凭证：自动生成记账凭证，实时全数据链匹配'
        }]
      },{
        name:'基本功能3：预算管理功能',
        items:[{
          text:'预算编制：一键导入编制表，自定义控制维度和金额'
        },{
          text:'智能管理：自动匹配对应环节，超额智能预警'
        },{
          text:'预算调整：在线申请，审批后实时调整'
        },{
          text:'智能报表：实时完成对比表，完整记录完成与调整情况'
        }]
      },{
        name:'基本功能4：资金管理功能',
        items:[{
          text:'智能匹配：自动匹配银行、业务、报销、发票数据'
        },{
          text:'资金管理：实时监管资金情况，合理安排资金使用'
        },{
          text:'资金计划：在线编制和调整，实时管控与分析'
        }]
      }],
        list3:[{
          text:'核算数据'
        },{
            text:'业务数据'
        },{
            text:'报销数据'
        },{
            text:'发票数据'
        },{
            text:'资金数据'
        },{
            text:'预算数据'
        }],
        list4:['自动整合完整的数据链条','提取真正有用的数据信息','高度自定义不同分析维度','全方位进行企业数据分析','高效率 高价值 高支撑']
    }
  },
  mixins:[wowInit],
  components: {
    vtitle,banner
  },
}
</script>

<style lang="less" scoped>

.sw{
  .add-btn{
    cursor: pointer;
    margin-top: 10px;
  }
}
</style>
